<template>
    <div class="body_bgi box_1 full bgs_full relative" ref="home_box">
      <!-- header -->
      <div class="header_bgi w_full h_100 bgs_full ph_20 border_box relative">
        <div class="full bgs_full flex_row_around ph_20 border_box">
          <div class="w_full ls_10 relative top_20 fs_40 main_color text_center font_zh">
            内蒙古自治区金融助农大数据平台
          </div>
        </div>
      </div>

      <!-- body -->
      <div class="w_full-60 h_full-110 m_0_auto flex_row_around">
        <!-- 1 -->
        <div class="w_25_p h_full flex_column_start gap_10">
          <div class="w_full h_33_p chart_box_bgi_1 p_10">
            <data-chart 
              title="各银行发放贷款金额"
              path=''
              chartType="柱状图3"
              :chartData="chartData1" 
              filterText=""
              :filterList="[]"
              :isShowUnit="true"
              :isShowFilterIcon="false"
              :isShowFullIcon="true"
            />
          </div>

          <div class="w_full h_33_p chart_box_bgi_1 p_10">
            <data-chart 
              title="金融保险"
              path=''
              chartType="柱状图3"
              :chartData="chartData2" 
              filterText=""
              :filterList="[]"
              :isShowUnit="true"
              :isShowFilterIcon="false"
              :isShowFullIcon="true"
            />
          </div>

          <div class="w_full h_33_p chart_box_bgi_1 p_10">
            <data-chart 
              title="担保统计"
              path=''
              chartType="柱状图3"
              :chartData="chartData3" 
              filterText=""
              :filterList="[]"
              :isShowUnit="true"
              :isShowFilterIcon="false"
              :isShowFullIcon="true"
            />
          </div>
        </div>

        <!-- 2 -->
        <div class="w_50_p h_full ph_10 border_box">
          <!--  地图 -->
          <div class="full map_box_bgi p_30">
            <Nmg-map @clickMap="clickMap" />
          </div>
        </div>

        <!-- 3 -->
        <div class="w_25_p h_full flex_column_between">
          <div class="w_full h_33_p chart_box_bgi_1 p_10">
            <data-chart 
              title="期货统计"
              path=''
              chartType="柱状图3"
              :chartData="chartData4" 
              filterText=""
              :filterList="[]"
              :isShowUnit="true"
              :isShowFilterIcon="false"
              :isShowFullIcon="true"
            />
          </div>

          <div class="w_full h_33_p chart_box_bgi_1 p_10">
            <data-chart 
              title="基金统计"
              path=''
              chartType="柱状图3"
              :chartData="chartData5" 
              filterText=""
              :filterList="[]"
              :isShowUnit="true"
              :isShowFilterIcon="false"
              :isShowFullIcon="true"
            />
          </div>

          <div class="w_full h_33_p chart_box_bgi_1 p_10">
            <data-chart 
              title="各盟市需求"
              path=''
              chartType="柱状图3"
              :chartData="chartData6" 
              filterText=""
              :filterList="[]"
              :isShowUnit="true"
              :isShowFilterIcon="false"
              :isShowFullIcon="true"
            />
          </div>
        </div>
      </div>

      <!-- welcome 欢迎页面 -->
      <div 
        class="full absolute top_0 left_0 welcome_bgi z_999 scroll_box" 
        :class="{ bgi_animate_none: hideWelcome }"
        v-show="isHideWelcome == hideWelcome2"
        @click="hideWelcomePage()"
      >
        <div class="full absolute top_0 left_0">
          <div class="w_full h_32_p absolute left_center top_20_p flex_column_around">
            <div class="w_full h_130 relative animate__animated" :class="{'animate__fadeOutUp': hideWelcome }">
              <div class="w_160 h_160 p_15 absolute_center border_box" >
                <!-- <img src="~@/assets/images/a-sys-img/logo.png" class="w_full response_img " alt=""> -->
              </div>
            </div>
            
            <div 
              class="w_full h_30 m_0_auto text_center fs_40 ls_13 main_color animate__animated mt_5"
              :class="[ hideWelcome ? 'animate__fadeOutUp' : 'animate__fadeInDown']"
            >          
              <div class="p_15 absolute_center border_box main_color fs_40 font_zh" >
                内蒙古自治区金融助农大数据平台
              </div>
            </div> 

            <div class="w_full h_100">
              <div 
                class="w_45_p h_full m_0_auto animate__animated"
                :class="[hideWelcome ? 'animate__fadeOutDown' : 'animate__fadeInUp']">
                <div class="w_80_p absolute_center border_box" >
                  <!-- <img src="~@/assets/images/a-sys-img/mon.png" class="w_full response_img" alt=""> -->
                </div>
              </div>
            </div>
          </div>

          <div class="w_full h_75 absolute left_center top_55_p" v-show="!hideWelcome">
            <div class="w_30 h_45 absolute left_center top_0"><img class="full" src="@/assets/images/a-sys-img/鼠标@2x.png" alt=""></div>
            <div class="main_color fs_14 absolute left_center bottom_0">请在随意位置点击进入首页</div>
          </div>

          <div class="w_full h_120 absolute left_center bottom_30">
            <div class="w_180 h_90 absolute left_center top_0"><img class="full" src="@/assets/images/a-sys-img/技术支持.png" alt=""></div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import AmapWeather from '@/common/weather/AmapWeather.vue';
  import CountFlop from '@/common/countFlop/index.vue';
  import defMixin from '@/mixins/def';
  import defImgMixin from '@/mixins/def-img';
  import componentsMixin from '@/mixins/components';

  import { getTownList } from '@/api/base/base.js';

  import { filePath } from "@/const"

  export default {
    name: 'Home',
    components: {
      AmapWeather,
      CountFlop
    },
    mixins: [defMixin, defImgMixin, componentsMixin],
    data() {
      return {
        filePath: filePath,
        isLoading: false,

        maleTotalCount: 13434,
        femaleTotalCount: 42455,

        chartData1: {},
        chartData2: {},
        chartData3: {},
        chartData4: {},
        chartData5: {},
        chartData6: {},

        seriesData: [],

        townList: [],   

        isHideWelcome: false,
        hideWelcome2: sessionStorage.getItem('role') || false,
        hideWelcome: false,


      }
    },
    computed: {

    },
    created() {
      
    },
    async mounted() {
      this.getTownList()

      this.initChart()
    },
    destroyed() {

    },
    methods: {
      initChart() {
        this.chartData1 = {
          unit: '亿元',
          x: ['中国银行', '农业银行', '工商银行', '招商银行', '光大银行', '建设银行'].reverse(),
          y: [4.6, 3.5, 3.1, 2.8, 2.9, 1.5].reverse()
        }

        this.chartData2 = {
          unit: '万元',
          x: ['农作物', '牲畜', '房屋', '其他'].reverse(),
          y: [46, 35, 31, 28].reverse()
        }

        this.chartData3 = {
          unit: '万元',
          x: ['信息1', '信息2', '信息3', '信息4'].reverse(),
          y: [46, 35, 31, 28].reverse()
        }

        this.chartData4 = {
          unit: '万亩',
          x: ['玉米', '土豆', '水稻'].reverse(),
          y: [5124, 4107, 2176, 28].reverse()
        }

        this.chartData5 = {
          unit: '万元',
          x: ['分类1', '分类2', '分类3'].reverse(),
          y: [524, 407, 276, 218].reverse()
        }

        this.chartData6 = {
          unit: '万元',
          x: ['呼和浩特市', '锡林郭勒盟', '包头市', '赤峰市', '呼伦贝尔市', '通辽市', '乌兰察布市'].reverse(),
          y: [5124, 4107, 2176, 2348, 3244, 2834, 2134, 5423].reverse()
        }
      },

      // 获取  所有镇苏木
      async getTownList() {
        let countyId = 150727000000
        let res = await getTownList(countyId)
        try {
          if (res.code == 200) {
            this.townList = res.data
          }
        } catch (err) {
          console.log('获取镇苏木列表失败 : ', err);
        }
      },

      hideWelcomePage() {
        sessionStorage.setItem('role', 1)
        this.hideWelcome = true

        setTimeout(() => {
          this.isHideWelcome = true
        }, 6000)
      },

      
      // 监听 点击 地图
      clickMap(val) {
        this.goToPage(`/cityPage/${val}`)
      },

      // 跳转页面 
      goToPage(val) {
        this.$router.push({
          path: val
        })
      },
    }
  }
</script>

<style lang="less">
.welcome_box_opacity { opacity: 60% !important; }

/* 滚动条没有边框 */
.y_scroll::-webkit-scrollbar {
  width: 8px;
  height: 100%;
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {                 /*表示纵向滚动块*/
  border-radius: 10px;
  background: #2366fc;
}
</style>           